<template>
  <div class="author">
    <h4 @click="toAuthor">{{ nodeData.author }}</h4>
    <ul class="nodeInformation">
      <li>于&nbsp;{{ nodeData.nodeDay }}&nbsp;发布</li>
      <li>{{ nodeData.popularity }}&nbsp;人气</li>
      <li class="collect" :id="collected ? 'collected' : ''" @click="collect">
        <span></span>收藏
      </li>
    </ul>
    <ul class="nodeClass">
      <li @click="toFind">
        语言：
        <p>{{ nodeData.nodeLanguage }}</p>
      </li>
      <li @click="toFind">
        类型：
        <p>{{ nodeData.nodeClass }}</p>
      </li>
    </ul>
    <a id="download" :href="downloadUrl"><span></span>下载</a>
  </div>
</template>

<script>
import { getCookie } from "@/tool/ToolCookie";
export default {
  props: ["nodeData"],
  data() {
    return {
      collected: false,
    };
  },
  computed: {
    // 请求后端下载笔记的请求路径
    downloadUrl() {
      return (
        "http://localhost:8181/node/download/" +
        this.$route.query.userId +
        "/" +
        this.$route.query.className +
        "/" +
        this.$route.query.language +
        "/" +
        this.$route.query.nodename
      );
    },
  },
  methods: {
    // 跳转到查询页面
    toFind() {
      const routeData = this.$router.resolve({
        path: "/main/find",
      });
      window.open(routeData.href, "_blank");
    },
    // 跳转到作者首页
    toAuthor() {
      this.$router.push({
        path: "/main/myNode/lately",
        query: {
          id: this.nodeData.userId,
        },
      });
    },
    // 点击收藏按钮
    collect() {
      // 判断用户是否登录
      if(getCookie("userId")==null) {
        alert("请先登录在进行收藏操作")
        return
      }
      // 若该用户已收藏，发送请求取消收藏
      if (this.collected) {
        // 取消收藏
        this.$axios({
          method: "post",
        url:
          "http://localhost:8181/collect/notCollectNode/" +
          getCookie("userId") +
          "/" +
          this.$route.query.id,
        }).then(
        (res) => {
          if(res.data) {
            // 修改收藏标志位
            this.collected = false
          }
        },
        (err) => {
          console.log(err);
        }
      );
        return;
      }
      // 若用户没有收藏，发送请求收藏
      this.$axios({
        method: "post",
        url:
          "http://localhost:8181/collect/collectNode/" +
          getCookie("userId") +
          "/" +
          this.$route.query.id,
      }).then(
        (res) => {
          if(res.data) {
            // 修改收藏标志位
            this.collected = true
          }
        },
        (err) => {
          console.log(err);
        }
      );
    },
  },
  mounted() {
    // 判断是否登录
    if (getCookie("userId") == null) {
      return;
    }
    // 请求后端看登录用户是否收藏该篇笔记
    this.$axios({
      method: "post",
      url:
        "http://localhost:8181/collect/whetherCollect/" +
        getCookie("userId") +
        "/" +
        this.$route.query.id,
    }).then(
      (res) => {
        // 若用户收藏了该笔记
        if (res.data) {
          // 修改收藏标志位,收藏按钮变色
          this.collected = true;
        }
      },
      (err) => {
        console.log(err);
      }
    );
  },
};
</script>

<style scoped>
.author {
  position: relative;
  height: 60px;
  display: block;
  width: 960px;
  margin: 20px;
  background-color: rgba(82, 76, 76, 0.166);
}
ul {
  list-style: none;
}
h4 {
  color: #fff;
  margin: 10px 0 0 30px;
  display: inline-block;
  cursor: pointer;
}
.nodeInformation {
  display: inline-block;
  margin: 10px 0 0 10px;
}
.nodeInformation li {
  display: inline-block;
  margin-right: 10px;
  font-size: small;
  color: darkgray;
}
.collect {
  cursor: pointer;
}

.collect:hover {
  color: rgb(250, 80, 40);
}

#collected {
  color: rgb(250, 80, 40);
}
.nodeClass {
  margin: 5px 0 0 50px;
}
.nodeClass li {
  display: inline-block;
  color: black;
  margin-right: 20px;
  font-weight: 600;
}
p {
  background-color: rgba(0, 0, 0, 0.2);
  display: inline-block;
  padding: 0 10px;
  color: rgb(100, 180, 210);
  cursor: pointer;
}
#download {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: large;
  font-weight: 800;
  color: #fff;
  cursor: pointer;
  letter-spacing: 5px;
  text-decoration: none;
}
#download:hover {
  color: rgb(250, 80, 40);
}
span {
  font-family: "icomoon";
  margin-right: 5px;
}
</style>